<template>
  <div :ref="chartId">
    <v-chart
      :force-fit="true"
      :height="400"
      :data="data"
      padding="auto"
      :scale="scale"
      renderer="canvas"
    >
      <v-tooltip />
      <v-axis data-key="type" :label="label" :tick-line="tickLine" />
      <v-axis data-key="value" :label="label" :title="title" />
      <v-interval
        position="type*value"
        :opacity="1"
        :adjust="adjust"
        color="company"
      />
    </v-chart>
  </div>
</template>

<script>
  const data = [
    {
      company: 'Apple',
      type: '整体',
      value: 30,
    },
    {
      company: 'HoloLive',
      type: '整体',
      value: 130,
    },
    {
      company: 'Facebook',
      type: '整体',
      value: 35,
    },
    {
      company: 'Google',
      type: '整体',
      value: 28,
    },
    {
      company: 'Apple',
      type: '非技术岗',
      value: 40,
    },
    {
      company: 'Facebook',
      type: '非技术岗',
      value: 65,
    },
    {
      company: 'Google',
      type: '非技术岗',
      value: 47,
    },
    {
      company: 'Apple',
      type: '技术岗',
      value: 23,
    },
    {
      company: 'Facebook',
      type: '技术岗',
      value: 18,
    },
    {
      company: 'Google',
      type: '技术岗',
      value: 20,
    },
    {
      company: 'Apple',
      type: '技术岗',
      value: 35,
    },
    {
      company: 'Facebook',
      type: '技术岗',
      value: 30,
    },
    {
      company: 'Google',
      type: '技术岗',
      value: 25,
    },
  ]

  const scale = [
    {
      dataKey: 'value', //y轴主键
      alias: '计算任务数量', //y轴别名
      max: 300,
      min: 0,
      tickCount: 11,
    },
  ]

  const label = {
    textStyle: {
      fill: '#aaaaaa', //字体颜色
    },
  }

  const title = {
    offset: 50, //左侧padding
  }

  const tickLine = {
    alignWithLabel: false,
    length: 0, //底部padding
  }

  const adjust = [
    {
      type: 'dodge',
      marginRatio: 1 / 32, //同一x值的两个柱子间距
    },
  ]

  export default {
    name: 'Histogram',
    props: {
      inputdata: {
        type: Object,
        default: () => {
          return {}
        },
      },
      chartId: {
        type: String,
        default: 'chart',
      },
      executeMethod: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        data,
        scale,
        label,
        tickLine,
        title,
        adjust,
      }
    },
    watch: {
      //执行输入的方法
      executeMethod: function (newValue, oldValue) {
        if (newValue.indexOf('download') != -1) {
          this.getimage()
        }
      },
    },
    methods: {
      //下载图表
      getimage: function () {
        // this.chartId = this.getId;
        // var canvas = document.getElementsByTagName("canvas");
        var canvas = this.$refs[this.chartId].getElementsByTagName('canvas')
        if (canvas) {
          // 创建标签
          var oA = document.createElement('a')
          // 设置下载名称
          oA.download = this.chartId + '图表' + '.jpeg'

          var c = canvas[0]
          // //背景颜色
          var ctx = c.getContext('2d')
          ctx.fillStyle = '#ffffff'
          ctx.globalCompositeOperation = 'destination-over' //在目标图像下显示该图像
          ctx.fillRect(0, 0, c.width, c.height)

          // 设置地址以及文件类型
          oA.href = c.toDataURL('image/jpeg', 1)

          // oA.href = canvas[0].toDataURL("image/jpeg",1);

          document.body.appendChild(oA)
          // 触发下载事件
          oA.click()
          // 移除标签
          oA.remove()
        }
      },
    },
  }
</script>
